<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table5</title>
    <link rel="stylesheet" type="text/css" href="./css/semantic.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/semantic.js"></script>
    <style>
        .table-wrapper-header {
            /* width: 1000px; */
            /* height: 200px; */
        }
        .table-wrapper-header table th{
            width: 25%;
        }
        .table-wrapper-body table td{
            width: 25%;
        }
        .table-wrapper-body {
            /* width: 1010px; */
            height: 100px;
            overflow: auto;
        }

        body ::-webkit-scrollbar {
            /* width: 0!important; */
        }
    </style>
</head>

<body ng-controller="tableCtrl">
    <div class="table-wrapper-header">
        <table class="ui celled table">
            <!-- <colgroup>
                <col width="250">
                <col width="250">
                <col width="250">
                <col width="260">
            </colgroup> -->
            <thead>
                <tr>
                    <th>name0</th>
                    <th>name0</th>
                    <th>name0</th>
                    <th>name0</th>
                    <th style="width: 0;padding: 0 5px; border: 0;"></th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="table-wrapper-body">
        <table class="ui celled table">
            <!-- <colgroup>
                <col width="250">
                <col width="250">
                <col width="250">
                <col width="240">
            </colgroup> -->
            <tbody>
                <tr ng-repeat="item in tableData">
                    <td>{{item.name0}}</td>
                    <td>{{item.name1}}</td>
                    <td>{{item.name2}}</td>
                    <td>{{item.name3}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./js/angular.js"></script>
    <script>
        const app = angular.module('myApp', []).
        controller('tableCtrl', ['$scope', function ($scope) {
            $scope.tableData = []
            for (let i = 0; i < 10; i++) {
                $scope.tableData.push({
                    name0: Math.random() * 10000,
                    name1: Math.random() * 10000,
                    name2: Math.random() * 10000,
                    name3: Math.random() * 10000,
                })
            }
        }]);
    </script>
</body>

</html>